<template>
  <div class="shop-r-form">
    <h2 class="pancel-title panel-11 flex v-align-c">
      <span></span>
      <i>悬浮按钮组</i>
    </h2>
    <div class="goods-form">
      <h3 class="pancel-s-title">按钮设置</h3>
      <el-form class="pad-t-15 pad-l-25 pad-r-25 form-diy">
        <div class="border-box">
          <h4>显示数量</h4>
          <div class="mar-t--5 mar-b--10">
            <el-form-item>
              <div class="font-14">
                <el-row>
                  <el-col :span="12">
                    <el-radio v-model="details.propMap.showNum" label="1" @change="numChange">1个</el-radio>
                  </el-col>
                  <el-col :span="12">
                    <el-radio v-model="details.propMap.showNum" label="2" @change="numChange">2个</el-radio>
                  </el-col>
                </el-row>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="mar-l--25 mar-t--28 pad-b-15">
          <h3 class="pancel-s-title">按钮内容</h3>
        </div>
        <div class="pancel-tips-bar">建议图片上传1:1，大小不超过50kb。</div>
        <template v-if="details.floatButtonList">
          <draggable id="content-box flex-item" v-model="details.floatButtonList" dragable="true" :move="getdata" @update="datadragEnd">
            <div v-for="(item, index) in details.floatButtonList" :key="'btns-list-' + index" v-if="index < details.propMap.showNum">
              <div class="drag-box">
                <div class="border-box btns-form flex v-align-c" :class="index === (details.floatButtonList.length - 1) ? '' : 'near-box'">
                  <img class="width-12 height-10 mar-r-20 mar-l--5" :src="iconDrag" alt="">
                  <div class="pad-t-5 pad-b-7">
                    <el-form-item label="图片" label-width="42px" class="none-mar-b pad-b-10 uploads-bar">
                      <div class="height-60 mar-r-10">
                        <el-upload class="avatar-uploader"
                          action="/api/common/uploadFiles"
                          accept="image/jpeg,image/gif,image/png,image/bmp"
                          list-type="picture-card-ms"
                          :before-upload="beforeUpload" 
                          name="files"                    
                          :data="token" 
                          :show-file-list="false" 
                          :on-success="(res)=> handleUploadSuccess(res, index)">
                            <img v-if="item.imgUrl" :src="item.imgUrl" width="60px" height="60px">
                            <div v-else class="default-p-pic">
                              <div class="default-p-img"></div>
                              <div class="default-p-t">上传图片</div>
                            </div>
                        </el-upload>                
                      </div>
                    </el-form-item>
                    <el-form-item label="链接" label-width="42px" class="none-mar-b pad-b-10 mar-t-6">
                      <div class="mini-sbar-input cursor-p" :class="item.linkRemark ? '' : 'default-sbar-input'"
                        @click="linkLayer(item)">{{ item.linkRemark ? item.linkRemark : '请选择链接' }}</div>
                    </el-form-item>
                  </div>
                </div>
                <div v-if="false" class="btn-edit-del selected">
                  <div class="btn-del" @click="remove(item, index)">删除</div>
                </div>
              </div>
            </div>
          </draggable>
        </template>
      </el-form>
    </div>
    <!-- 链接设置弹层 -->
    <el-dialog title="链接选择器" :visible.sync="linkSetVisible" :close-on-press-escape="true" width="850px">
      <!-- appType 13 为主播小程序 -->
      <component-link-layer v-if="appType !== 13" :appType="appType" v-on:selectLink="setLinkTemp"></component-link-layer>
      <component-anchor-link-layer v-else v-on:selectLink="setLinkTemp"></component-anchor-link-layer>
    </el-dialog>
  </div>
</template>

<script>
  import elDragDialog from '@/directive/el-dragDialog'
  import draggable from 'vuedraggable'
  import { getToken } from '@/utils/auth'
  import ComponentLinkLayer from './../ComponentLinkLayer'
  import ComponentAnchorLinkLayer from './../ComponentAnchorLinkLayer'
  import iconDrag from '@/assets/images/icon-drag.gif'
  export default {
    components: {
      ComponentLinkLayer,
      ComponentAnchorLinkLayer,
      draggable
    },
    directives: {
      elDragDialog
    },
    props: {
      details1: {
        type: Object,
        default: null
      },
      appType: {
        type: Number,
        default: 10
      }
    },
    data() {
      return {
        details: {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          backColor: '',
          propMap: {},
          floatButtonList: []
        },
        fullScreenLoading: null,
        // 定义链接选择器基础数据开始
        linkSetVisible: false,
        link: {},
        // 定义链接选择器基础数据结束
        iconDrag
      }
    },
    // 初始化页面
    created() {
      this.details = this.details1
      this.token = { accessToken: getToken() }
      const that = this
      this.$bus.$on('resetDetailsFloatbtns', function(details) {
        that.details = details
      })
    },
    methods: {
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'
        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
        }
        this.fullScreenLoading = this.$loading({
          lock: true,
          text: '加载中',
          background: 'rgba(255, 255, 255, 0.5)'
        })
        return (isJPG || isBMP || isGIF || isPNG)
      },
      handleUploadSuccess(res, index) {
        this.fullScreenLoading.close()
        if (res.code === 101) {
          this.details.floatButtonList[index].imgUrl = res.data[0]
          this.$bus.$emit('resetDetailsFloatbtns', this.details)
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return false
        }
      },
      getdata() {},
      datadragEnd(evt) {
        evt.preventDefault()
        const filters = this.details.floatButtonList
        for (let a = 0; a < filters.length; a++) {
          filters[a].index = a
        }
        this.details.floatButtonList = filters
      },
      remove(item, index) {
        this.details.floatButtonList.splice(index, 1)
      },
      numChange() {
        const btnNum = this.details.propMap.showNum * 1
        if (btnNum > this.details.floatButtonList.length) {
          for (let i = this.details.floatButtonList.length; i < btnNum; i++) {
            this.details.floatButtonList.push({
              buttonId: '',
              imgUrl: '',
              linkType: '',
              linkParams: ''
            })
          }
        }
      },
      linkLayer(item) {
        this.link = item
        this.linkSetVisible = true
      },
      setLinkTemp(item) {
        Object.assign(this.link, item)
        this.linkSetVisible = false
      },
      resetDetails() {
        this.details = {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          backColor: '',
          propMap: {},
          floatButtonList: []
        }
      }
    }
  }
</script>
<style lang="less" scoped>
.drag-box{
  position: relative;
  .border-box{
    margin-bottom: 15px;
  }
  .btn-edit-del {
    width: 30px;
    height: 30px;
    overflow: hidden;
    position: absolute;
    right: 0px;
    top: 0px;
    display: block;
    z-index: 90;
    font-size: 14px;
    text-align: right;
    display: none;
    &.selected{
      display: block;
    }
  }
  .btn-edit-del > div {
    width: 16px;
    height: 16px;
    display: inline-block;
    text-indent: -100em;
    text-align: left;
    font-size: 10px;
    color: #333;
    cursor: pointer;
    position: relative;
    z-index: 11;
    background: url('@/../../../../../../assets/images/icons-close-1.png') no-repeat;
    background-size: 16px 16px;
  }
}
</style>
